<template>
	<el-drawer title="移动资源" size="320px" :visible.sync="visible">
		<div class="move_resource_wrapper">
			<library-tree v-if="visible" v-model="checkedResData" :folder-id="resFolderId"></library-tree>
			<div class="button">
				<el-button size="small" @click="visible = false">取消</el-button>
				<el-button size="small" type="primary" :loading="loading" @click="handleConfirmMove()">确定</el-button>
			</div>
		</div>
	</el-drawer>
</template>
<script>
import libraryTree from './tree';
import { batchMoveResource } from '@/api/data/tbNetDisk';
export default {
	components: { libraryTree },
	props: {
		value: { type: Boolean, default: false },
		data: { type: Array, default: () => [] }
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			checkedResData: {}
		};
	},
	computed: {
		resFolderId() {
			let data = this.data[0];
			return data.pid == 0 ? data.dirId : data.pid;
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
		}
	},
	methods: {
		handleConfirmMove() {
			if (Object.keys(this.checkedResData).length === 0) {
				this.$message.success('请选择目标库和文件夹');
			}
			this.loading = true;
			this.moveResourceRequest();
		},

		//格式化请求参数
		formatRequestParams() {
			let params = {};
			params['targetId'] = this.checkedResData.pid;
			params['targetDir'] = this.checkedResData.dirId;
			params['list'] = this.data.map((item) => item.id);
			return params;
		},

		//移动资源请求
		async moveResourceRequest() {
			let params = this.formatRequestParams();
			let result = await batchMoveResource(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.$message.success('移动资源成功');
				this.$emit('refresh');
				this.visible = false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.move_resource_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	.el-tree {
		flex: 1;
		overflow: hidden;
		overflow-y: auto;
	}
	.button {
		padding: 16px;
		flex-shrink: 0;
		text-align: right;
		border-top: solid 1px #dcdfe6;
	}
}
</style>
